<template>
  <form-dialog
    :visible="visible"
    :loading="loading"
    @handleClose="handleClose"
    :width="'50%'"
    :title="title">
    <template slot="content">
      <div style="display:flex">
        <el-form ref="basicForm" style="border-right:1px solid #cccccc;padding-right:30px" :rules="rules" :model="form" label-width="90px">
          <el-form-item prop='name' :label="'名称'">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item :label="'任务'" prop='type'>
            <el-select v-model="form.type">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop='is_active' :label="'激活'">
            <el-switch
              v-model="form.is_active">
            </el-switch>
          </el-form-item>
          <el-form-item prop='description' :label="'描述'">
            <el-input type="textarea" maxlength="200" show-word-limit v-model="form.description"></el-input>
          </el-form-item>
        </el-form>
        <el-form v-if="isCalendar" class="calendarForm" ref="calendarForm" :rules="rules" :model="calendarForm" label-width="90px">
          <el-form-item :label="'时间'" prop='dateValue'>
            <el-time-picker
              v-model="calendarForm.dateValue"
              placeholder="任意时间点"
              value-format="HH:mm"
              format="HH:mm"
              :clearable='false'
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item class="week" label="周期" prop="weekValue">
            <el-checkbox-group v-model='calendarForm.weekValue' size="small" style="display: flex; flex-wrap: wrap; justify-content: flex-start">
              <el-checkbox label='1' border style="margin-left: unset;line-height: 20px; ">Monday</el-checkbox>
              <el-checkbox label='2' border style="margin-left: unset;line-height: 20px; ">Tuesday</el-checkbox>
              <el-checkbox label='3' border style="margin-left: unset; line-height: 20px; ">Wednesday</el-checkbox>
              <el-checkbox label='4' border style="margin-left: unset; line-height: 20px; ">Thursday</el-checkbox>
              <el-checkbox label='5' border style="margin-left: unset; line-height: 20px; ">Friday</el-checkbox>
              <el-checkbox label='6' border style="margin-left: unset; line-height: 20px; ">Saturday</el-checkbox>
              <el-checkbox label='0' border style="margin-left: unset; line-height: 20px; ">Sunday</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item style="padding-left:43px">
            <el-button @click="isCalendarChange">高级模式</el-button>
          </el-form-item>
        </el-form>
        <el-form v-else class="advancedForm" ref="advancedForm" :rules="rules" :model="advancedForm">
          <el-row :gutter="4" style="padding-left:50px">
            <el-col :span="12">
              <el-form-item :label="'分'" prop="minute">
                <el-input v-model='advancedForm.minute'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="'时'" prop="hour">
                <el-input v-model='advancedForm.hour'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="'日'" prop="day">
                <el-input v-model='advancedForm.day'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="'月'" prop="month">
                <el-input v-model='advancedForm.month'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" style="padding-left:50px">
            <el-col :span="24">
              <el-form-item :label="'周'" prop="week">
                <el-input v-model='advancedForm.week'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item style="padding-left:50px">
            <el-button @click="isCalendarChange">日历模式</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template slot="footer">
      <el-button @click="handleClose">{{$t('common.cancel')}}</el-button>
      <el-button type="primary" @click="submit">{{$t('common.confirm')}}</el-button>
    </template>
  </form-dialog>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialog from '../../../components/Dialog/formDialog.vue'
export default Vue.extend({
  components: {
    FormDialog
  },
  data() {
    return {
      title: '',
      visible: false,
      loading: false,
      isCalendar: true,
      data: {}, // 根据是否有参数判断为新建还是编辑
      options: [
        {
          label: this.$t('desktopManage.notice'),
          value: 'notice'
        }
      ],
      action: 'SENDMESSAGE',
      form: { // 基本参数
        name: '',
        type: '',
        description: '',
        is_active: false
      },
      calendarForm: { // 日历模式
        dateValue: new Date(),
        weekValue: ["1", "2", "3", "4", "5", "6", "0"]
      },
      advancedForm: { // 高级模式
        month: '',
        day: '',
        hour: (new Date()).getHours() as any,
        minute: (new Date()).getMinutes() as any,
        week: ''
      },
      rules: {
      }
    }
  },
  methods: {
    handleClose () {
      this.visible = false;
    },
    submit () {
    },
    init (obj: any) {
      this.title = '新建计划任务';
      this.visible = true;
      console.log((new Date()).getHours())
      if (obj.data) {
        this.data = obj.data;
        this.form.name = '';
        this.form.type = '';
        this.form.description = '';
        this.form.is_active = false;
      } else {
        this.form.name = '';
        this.form.type = '';
        this.form.description = '';
        this.form.is_active = false;
        this.advancedForm.month = '*';
        this.advancedForm.day = '*';
        this.advancedForm.week = '*';
      }
    },
    isCalendarChange() {
      this.isCalendar = !this.isCalendar
    }
  }
})
</script>

<style lang="scss" scoped>
  .calendarForm {
    ::v-deep.el-input.el-input--small {
      width:100% !important;
    }

    .week {
      ::v-deep.el-checkbox-group {
        .el-checkbox {
          font-weight: normal;
          font-size: 12px;
          color: #555555;
        }

        .el-checkbox__input {
          display: none;
        }

        .el-checkbox__label {
          padding-left: 0;
        }

        .el-checkbox.is-bordered.el-checkbox--small {
          padding: 4px;
          margin-right: 10px;
          margin-top: 10px;
          min-width: 54px;
          text-align: center;
        }
      }
    }
  }

  .advancedForm {
    ::v-deep.el-form-item__label {
      width: auto !important;
    }
  }
</style>